import type { FormItemRule, FormProps, FormRules } from 'naive-ui'
import type { CSSProperties, Ref, VNodeChild } from 'vue'
import type { UseActionsReturn } from './use-actions'
import type { BaseComponentProps, CustomSlots, DynamicProp, NvBtnOption, NvDict, RowData, Size } from '@/types'

export type NvFormMode = 'view' | 'edit' | 'add'

export interface NvFormProps {
  mode?: NvFormMode
  option: NvFormOption
  onSubmit?: (done: () => void) => void
}

export interface NvFormItemOption<T = RowData> extends BaseComponentProps {
  type?: string
  label?: string | (() => VNodeChild)
  showLabel?: boolean
  labelWidth?: string | number
  labelStyle?: string | CSSProperties
  labelAlign?: 'left' | 'center' | 'right'
  labelPlacement?: 'left' | 'top'

  span?: string | number
  verticalSpan?: number
  offset?: string | number
  /** 是否为最后的节点 */
  suffix?: boolean

  rule?: FormRules | FormItemRule | FormItemRule[]

  formOrder?: number
  formVisible?: DynamicProp<boolean>

  readonly?: DynamicProp<boolean>
  disabled?: DynamicProp<boolean>
  clearable?: boolean
  placeholder?: string | [string, string]
  defaultValue?: unknown

  dict?: NvDict<T>

  props?: RowData
  slots?: CustomSlots
}

export interface NvGroupOption {
  type?: 'collapse' | 'steps'
  size?: 'small' | 'medium'
  /** 折叠面板是否只允许展开一个面板。默认false */
  accordion?: boolean
  /** 是否为纵向步骤条 */
  vertical?: boolean
  /** 步骤条对齐方式 */
  align?: 'start' | 'center' | 'end'
  /** 步骤条节点完成图标 */
  finishIcon?: () => VNodeChild
  /** 步骤条节点错误图标 */
  errorIcon?: () => VNodeChild
  /** 节点公共图标 */
  icon?: () => VNodeChild

  items: {
    title: string | (() => VNodeChild)
    description?: string
    icon?: () => VNodeChild
    disabled?: boolean
    expanded?: boolean
    fields: string[]
  }[]
}

export interface NvFormActionsOption {
  align?: 'start' | 'center' | 'end'
  submitBtn?: NvBtnOption | boolean | Ref<boolean>
  clearBtn?: NvBtnOption | boolean | Ref<boolean>
  prevBtn?: NvBtnOption | boolean | Ref<boolean>
  nextBtn?: NvBtnOption | boolean | Ref<boolean>
  teleportTo?: string
}

export interface NvFormOption<T = RowData> {
  showLabel?: boolean
  labelWidth?: number | string
  labelStyle?: string | CSSProperties
  labelAlign?: 'left' | 'center' | 'right'
  labelPlacement?: 'top' | 'left'
  /** 是否只展示第一个验证错误信息 */
  first?: boolean
  size?: Size
  showRequireMark?: boolean
  requireMarkPlacement?: 'left' | 'right' | 'right-hanging'
  showFeedback?: boolean
  feedbackClass?: BaseComponentProps['class']
  feedbackStyle?: BaseComponentProps['style']
  validateMessages?: FormProps['validateMessages']

  xGap?: number | string
  yGap?: number | string

  submitOnEnter?: boolean
  formActions?: NvFormActionsOption | boolean
  fields: Record<string, NvFormItemOption<T>>
  group?: NvGroupOption
}

export interface NvFormInst extends UseActionsReturn {
}
